<div class="primeng-datatable-container" >
    <p-table [value]="records" >
        <ng-template pTemplate="header">
            <tr *ngIf="listConfig.length === 0">
                <th style="width: 150px">
                    {{'Picture'| localize}}
                </th>
                <th style="width: 120px">
                    {{'Title'| localize}}
                </th>
                <th style="width: 80px">
                    {{'Order'| localize}}
                </th>
                <th style="width: 80px">
                    {{'IsActive' | localize}}
                </th>
                <th style="width: 120px">
                    {{'CreationTime' | localize}}
                </th>
                <th style="width: 80px">
                    {{'Actions' | localize}}
                </th>
            </tr>
            <tr *ngIf="listConfig.length > 0">
                <th [ngStyle]="{'width': config.width + 'px' }" *ngFor="let config of listConfig">
                    {{config.displayName | localize}}
                </th>
                <th style="width: 80px">
                    {{'Actions' | localize}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-record="$implicit">
            <tr  *ngIf="listConfig.length === 0">
                <td style="width: 150px">
                    <a class="fancybox" (click)="lookOver(record.picurl)" *ngIf="record.picurl">
                        <img src="{{getSmallUrl(record.picurl)}}"   style="max-height:80px;max-width:100px"  />
                    </a>
                </td> 
               <td style="width: 120px">
                   <a (click)="editModuleFunc(record)" href="javascript:void(0)">
                       {{record.title}}
                   </a>
               </td>
               <td style="width: 80px">
                   {{record.order}}
               </td>
               <td style="width: 80px">
                   <span class="label label-success label-inline"
                       *ngIf="record.isActive">{{'Yes' | localize}}</span>
                   <span class="label label-dark label-inline" *ngIf="!record.isActive">{{'No'| localize}}</span>
               </td>
               <td style="width: 120px">
                   {{record.creationTime | timestampFormat:'F'}}
               </td>
               <td style="width: 80px">
                <div>
                    <a href="javascript:void(0)" class="mr-2" *ngIf="permissions.edit && !record.isActive"  (click)="releaseState(record)"><i class="fa fa-book text-info" title="{{'Active' | localize}}"></i></a>
                    <a href="javascript:void(0)" class="mr-2" *ngIf="permissions.edit && record.isActive" (click)="cancelReleaseState(record)"><i class="fa fa-undo text-info" title="{{'CancelRelease' | localize}}"></i></a>
                    <a href="javascript:void(0)" class="mr-2" *ngIf="permissions.delete" (click)="deleteSingle(record)"><i class="fa fa-times text-info" title="{{'Delete' | localize}}"></i></a>
                    <a href="javascript:void(0)" class="mr-2" *ngIf="permissions.edit" (click)="upsort(record)"><i class="fa fa-arrow-up text-info" title="{{'UpSort' | localize}}"></i></a>
                    <a href="javascript:void(0)"  *ngIf="permissions.edit" (click)="downSort(record)"><i class="fa fa-arrow-down text-info" title="{{'DownSort' | localize}}"></i></a>
                </div>
                </td>
           </tr>
           <tr  *ngIf="listConfig.length > 0">
            <ng-container *ngFor="let config of listConfig">
                <td style="width: 150px" *ngIf="config.isPic">
                    <a class="fancybox" (click)="lookOver(record[config.fieldName])" *ngIf="record[config.fieldName]">
                        <img src="{{getSmallUrl(record[config.fieldName])}}"   style="max-height:80px;max-width:100px"  />
                    </a>
                </td>
                <td [ngStyle]="{'width': config.width + 'px' }" *ngIf="!config.isPic">
                    <span *ngIf="config.fieldName === 'title'">
                        <a href="javascript:void(0)" (click)="editModuleFunc(record)" title="{{record.title}}">
                            {{record.title | stringTruncate:35}}&nbsp;
                        </a>
                    </span>
                    <span class="label label-success label-inline" *ngIf="config.fieldName && config.isBooleanType && record[config.fieldName]">
                        {{'Yes' | localize}}
                    </span>
                    <span class="label label-dark label-inline" *ngIf="config.fieldName && config.isBooleanType && !record[config.fieldName]">
                        {{'No' | localize}}
                    </span>
                    <span *ngIf="config.fieldName && config.isDateTimeType">
                        {{record[config.fieldName]|timestampFormat: config.format}}
                    </span>
                    <span *ngIf="config.fieldName && config.fieldName !== 'menuId' && config.fieldName !== 'title' && !config.isBooleanType && !config.isDateTimeType">
                        {{record[config.fieldName]}}
                    </span>
                    <span *ngIf="!config.fieldName">
                        <a href="javascript:void(0)" (click)="exDiyFunc(record, config.actionFuncName)" *ngIf="config.actionFuncName">
                            {{'LookOver' | localize}}
                        </a>
                        <span href="javascript:void(0)" *ngIf="config.renderFuncName">
                            {{ getDiyFuncResult(record, config.renderFuncName)}}
                        </span>
                    </span>
                </td>
            </ng-container>
            <td style="width: 80px">
                <div>
                    <a href="javascript:void(0)" class="mr-2" *ngIf="permissions.edit && !record.isActive"  (click)="releaseState(record)"><i class="fa fa-book text-info" title="{{'Active' | localize}}"></i></a>
                    <a href="javascript:void(0)" class="mr-2" *ngIf="permissions.edit && record.isActive" (click)="cancelReleaseState(record)"><i class="fa fa-undo text-info" title="{{'CancelRelease' | localize}}"></i></a>
                    <a href="javascript:void(0)" class="mr-2" *ngIf="permissions.delete" (click)="deleteSingle(record)"><i class="fa fa-times text-info" title="{{'Delete' | localize}}"></i></a>
                    <a href="javascript:void(0)" class="mr-2" *ngIf="permissions.edit" (click)="upsort(record)"><i class="fa fa-arrow-up text-info" title="{{'UpSort' | localize}}"></i></a>
                    <a href="javascript:void(0)"  *ngIf="permissions.edit" (click)="downSort(record)"><i class="fa fa-arrow-down text-info" title="{{'DownSort' | localize}}"></i></a>
                </div>
            </td>
            </tr>
        </ng-template>
    </p-table>
    <div class="primeng-no-data" *ngIf="records.length == 0">
        {{'NoData' | localize}}
    </div>
</div>
